<template>
  <div class="sosBody wap">
    <x-header v-if="!this.$fromApp(this)" :left-options="{backText: ''}">特价设置</x-header>
    <div class="main">
      <div class="inputGroup">
        <div class="firstGroup display-flex flex-direction-column">
          <div class="firstGroupItem display-flex flex-direction-row align-items-center">
            <p class="firstGroupTitle must">参与客户:</p>
            <div class="firstGroupR display-flex flex-direction-row">
              <input
                class="disInputM"
                type="text"
                disabled
                v-model="selectCustomerObj.name"
                style="text-indent: 10px;background-color: rgb(235,235,228);"
              />
              <p
                class="choseBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                @click="selectCustomer"
              >
                <span>选择</span>
              </p>
            </div>
          </div>
          <div class="firstGroupItem display-flex flex-direction-row align-items-center">
            <p class="firstGroupTitle must">商品名称:</p>
            <div class="firstGroupR display-flex flex-direction-row">
              <input
                class="disInputM"
                type="text"
                disabled
                v-model="selectedGoods.name"
                style="text-indent: 10px;background-color: rgb(235,235,228);"
              />
              <p
                class="choseBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
                @click="showPopupFn"
              >
                <span>选择</span>
              </p>
            </div>
          </div>
          <div class="firstGroupItem display-flex flex-direction-row align-items-center">
            <p class="firstGroupTitle must">商品规格:</p>
            <div class="firstGroupR display-flex flex-direction-row">
              <input
                class="disInputM"
                type="text"
                disabled
                v-model="selectedGoods.spec"
                style="text-indent: 10px;background-color: rgb(235,235,228);"
              />
            </div>
          </div>
          <div
            class="firstGroupItem display-flex flex-direction-row align-items-center"
            style="height: .86rem"
          >
            <p class="firstGroupTitle must">有效期:</p>
            <div class="firstGroupR display-flex flex-direction-row align-items-center">
              <datetime
                class="selectDate display-flex flex-direction-row align-items-center justify-content-flex-center"
                placeholder="选择日期"
                :start-date="nowDate"
                v-model="beginTime"
                @on-change="change"
                format="YYYY-MM-DD HH:mm"
                :style="{color:(beginTime==''?'#DDDDDD':'#000000')}"
              ></datetime>
              <span style="margin: 0 .2rem">至</span>
              <datetime
                class="selectDate display-flex flex-direction-row align-items-center justify-content-flex-center"
                placeholder="选择日期"
                :start-date="endTimeDef"
                v-model="endTime"
                @on-change="change"
                format="YYYY-MM-DD HH:mm"
                :style="{color:(endTime==''?'#DDDDDD':'#000000')}"
              ></datetime>
            </div>
          </div>
          
        </div>
        <template v-if="selectedGoods.id">
          <div class="secondGroup">
            <p>原价：</p>
            <div class="display-flex flex-direction-row justify-content-flex-justify">
              <div
                v-for="(unit,i) in selectedGoods.unitVOList"
                :key="i"
                class="secondGroupItem display-flex flex-direction-row align-items-center"
              >
                <span style="width: 1.35rem;text-align: center">{{unit.name}}价格</span>
                <input
                  class="inputS"
                  type="text"
                  disabled
                  :value="unitPriceMap[unit.id]"
                  style="background-color: rgb(235,235,228);"
                />
                <span>元</span>
              </div>
              <!-- <div class="secondGroupItem display-flex flex-direction-row align-items-center">
                <span>件价格</span>
                <input
                  class="inputS"
                  type="text"
                  disabled
                  v-model="initPiecePrice"
                  style="background-color: rgb(235,235,228);"
                />
                <span>元</span>
              </div>-->
            </div>
          </div>
          <div class="secondGroup">
            <p>特价：</p>
            <div class="display-flex flex-direction-row justify-content-flex-justify">
              <div
                v-for="(unit,i) in goodsSpecial"
                :key="i"
                class="secondGroupItem display-flex flex-direction-row align-items-center"
              >
                <span class="must" style="width: 1.35rem;">{{unit.unitName}}价格</span>
                <input class="inputS" v-model="unit.taxPrice" type="number" />
                <span>元</span>
              </div>
              <!-- <div class="secondGroupItem display-flex flex-direction-row align-items-center">
                <span>件价格</span>
                <input
                  class="inputS"
                  v-model="sosPiecePrice"
                  @keydown="changeInput"
                  type="number"
                  :disabled="!hasPiece"
                />
                <span>元</span>
              </div>-->
            </div>
          </div>
          <div class="secondGroup">
            <div class="display-flex flex-direction-row align-items-center">
              <span class="must" style="width: 1.4rem;text-align: center">每人限购</span>
              <div
                v-for="(unit,i) in goodsSpecial"
                :key="i"
                class="secondGroupItem display-flex flex-direction-row align-items-center"
              >
                <input class="inputS" v-model="unit.limitNum" type="number" />
                <span>{{unit.unitName}}</span>
              </div>
              <!-- <div
                class="secondGroupItem display-flex flex-direction-row align-items-center"
                style="margin-left: .5rem"
              >
                <input
                  class="inputS"
                  v-model="sosPieceLimit"
                  @keydown="changeInput"
                  type="number"
                  :disabled="!hasPiece"
                />
                <span>件</span>
              </div>-->
            </div>
          </div>
          <div class="secondGroup">
            <div class="display-flex flex-direction-row align-items-center">
              <span class="must" style="width: 1.4rem;text-align: center">商品数量</span>
              <div
                v-for="(unit,i) in goodsSpecial"
                :key="i"
                class="secondGroupItem display-flex flex-direction-row align-items-center"
              >
                <input class="inputS" v-model="unit.totalNum" type="number" />
                <span>{{unit.unitName}}</span>
              </div>
              <!-- <div
                class="secondGroupItem display-flex flex-direction-row align-items-center"
                style="margin-left: .5rem"
              >
                <input
                  class="inputS"
                  v-model="pieceTotalNum"
                  @keydown="changeInput"
                  type="number"
                  :disabled="!hasPiece"
                />
                <span>件</span>
              </div>-->
            </div>
          </div>
        </template>
      </div>
      <div
        v-if="showBtn"
        class="setBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
        @click="submitFn"
      >
        <span>确认</span>
      </div>
    </div>
    <x-dialog v-model="showToast" class="customerDialog">
      <ul class="customerList">
        <scroller class="customerListScroller">
          <li
            v-for="(item,index) in customerArr"
            @click="choseCustomerType(item)"
            :key="index"
            class="customerItem display-flex align-items-center"
          >
            <img
              :src="selectCustomerId==item.id?require('../../../../assets/img/order/chose_1.png'):require('../../../../assets/img/order/chose_2.png')"
              alt
            />
            <span>{{item.name}}</span>
          </li>
        </scroller>
      </ul>
      <div
        class="selectCustomerBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
        @click="sureSelectCustomer"
      >
        <span>确定</span>
      </div>
    </x-dialog>
    <popup class="selectGoodsBox" v-model="showPopup" position="right" width="100%">
      <div class="selectGoodsHead display-flex flex-direction-row align-items-center">
        <img
          class="vux-close"
          @click="closePopupFn"
          src="../../../../assets/img/order/close.png"
          alt
        />
        <span class="selectGoodsTitle">选择商品</span>
      </div>
      <div class="searchBox display-flex flex-direction-row align-items-center">
        <input
          class="searchInput"
          type="text"
          v-model="searchKeyWord"
          :placeholder="searchIcon"
          @input="inputChange"
        />
        <span
          class="searchBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
          @click="searchGoods"
        >
          <span>查询</span>
        </span>
      </div>
      <div class="searchContent">
        <div
          class="searchTree"
          style="position: relative"
          :style="{'height':this.$platform() == 1?'8.2rem':'8rem'}"
        >
          <scroller class="searchContentScroller">
            <div class="treeItem" v-for="(item,index) in goodsArr" :key="index">
              <div @click="openGoods(item)" class="treeParent display-flex flex-direction-row">
                <img v-if="item.open" src="../../../../assets/img/order/closeTree.png" alt />
                <img v-else src="../../../../assets/img/order/openTree.png" alt />
                <p>{{item.name}}</p>
              </div>
              <div v-if="item.open" class="treeChildren">
                <div v-for="(j,jIndex) in item.goodsList" :key="jIndex">
                  <div
                    @click="selectGoods(j)"
                    class="childrenItem display-flex flex-direction-row align-items-center"
                  >
                    <img
                      :src="selectGoodsId==j.id?require('../../../../assets/img/order/chose_1.png'):require('../../../../assets/img/order/chose_2.png')"
                      alt
                    />
                    <p>[{{j.brandName}}] {{j.name}}</p>
                  </div>
                </div>
              </div>
            </div>
          </scroller>
        </div>
        <p
          v-if="showBtn"
          class="sureBtn display-flex flex-direction-row align-items-center justify-content-flex-center"
          @click="sureSelect"
        >
          <span>确认选中</span>
        </p>
      </div>
    </popup>
  </div>
</template>

<script>
import { Datetime, Popup } from "vux";
export default {
  name: "specialOfferSetting",
  components: {
    Datetime,
    Popup,
  },
  data() {
    return {
      showToast: false,
      showPopup: false,
      customerArr: [],
      selectCustomerObj: {},
      goodsArr: [],
      selectObj: {},
      selectedGoods: {},
      selectGoodsId: -1,
      selectCustomerId: -1,
      searchIcon: "\ue630 请输入商品名称",
      searchKeyWord: "",
      beginTime: "",
      endTime: "",
      nowDate: "",
      endTimeDef: "",
      hasPack: false,
      hasPiece: false,
      initPackPrice: "",
      initPackUnitId: "",
      initPiecePrice: "",
      initPieceUnitId: "",
      packTotalNum: "",
      pieceTotalNum: "",
      sosPackPrice: "",
      sosPiecePrice: "",
      sosPackLimit: "",
      sosPieceLimit: "",
      goodsSpecial: [],
      unitPriceMap: {},
      showBtn: true,
      docmHeight: document.documentElement.clientHeight, //初始屏幕高度
    };
  },
  created() {
    this.getNowDate();
  },
  mounted() {
    if (this.$platform() == 1) {
      window.onresize = () => {
        if (document.body.clientHeight < this.docmHeight) {
          this.showBtn = false;
          if (
            document.activeElement.tagName == "INPUT" ||
            document.activeElement.tagName == "TEXTAREA"
          ) {
            setTimeout(function () {
              document.activeElement.scrollIntoViewIfNeeded();
            }, 100);
          }
        } else {
          this.showBtn = true;
        }
      };
    }
  },
  methods: {
    getNowDate() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
        month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate;
      }
      var monthFirstDay = year + seperator1 + month + seperator1 + "01";
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      this.nowDate = currentdate + "";
    },
    change(value) {
      // console.log('change', value)
      // console.log('change1', this.beginTime)
      // console.log('change2', this.endTime)

      var beginStr = this.beginTime + "";
      this.endTimeDef = beginStr.split(" ")[0];
      // if(this.beginTime>this.endTime){
      //   this.endTime = this.beginTime;
      // }
    },
    changeInput(e) {
      // e.target.value = (e.target.value.match(/(^[\+\-]?\d{1,9})*(\.?\d{0,1})/g)[0]) || null
    },
    inputChange() {
      this.searchKeyWord = this.searchKeyWord.replace(
        /[^\a-\z\A-\Z0-9\u4E00-\u9FA5\%&]/g,
        ""
      );
    },
    getGoodsList(name = "") {
      this.$ajax.get(
        "activity/seller/choose/goodsList",
        (res) => {
          if (res.code == "200") {
            for (let i = 0; i < res.data.length; i++) {
              res.data[i].open = false;
            }
            this.goodsArr = res.data;
            // console.log(this.goodsArr);
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        { name: name, type: 0, distributorCategoryIds: this.selectCustomerId }
      );
    },
    selectCustomer() {
      // if (this.selectedGoods.name) {
        this.showToast = true;
        this.$ajax.get("common/seller/customer_category/list", (res) => {
          if (res.code == "200") {
            this.customerArr = res.data;
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
          // console.log(this.customerArr)
        });
      // } else {
      //   this.$vux.toast.text("请先选择商品", "center");
      // }
    },
    choseCustomerType(item) {
      this.selectCustomerId = item.id;
      this.selectCustomerObj = item;
      // console.log('选择的客户信息',this.selectCustomerObj);
    },
    sureSelectCustomer() {
      if (-1 == this.selectCustomerId) {
        this.$vux.toast.text("请选择参与客户", "center");
        return;
      }
      this.showToast = false;
      this.getUnitPrice()
    },
    getUnitPrice(){
      if (-1 == this.selectCustomerId) return
      if(this.selectGoodsId<=0 || !this.selectGoodsId) return
      this.$ajax.get(
        "common/goods_unit_price",
        (res) => {
          // console.log('=w=w=w',res)
          if (res.code == "200") {
            this.priceArr = res.data;

            for (let i = 0; i < res.data.length; i++) {
              // if (res.data[i].unitName == "件") {
              //   this.hasPiece = true;
              //   this.initPiecePrice = res.data[i].taxPrice;
              //   this.initPieceUnitId = res.data[i].unitId;
              // } else if (res.data[i].unitName == "包") {
              //   this.hasPack = true;
              //   this.initPackPrice = res.data[i].taxPrice;
              //   this.initPackUnitId = res.data[i].unitId;
              // }
              this.$set(
                this.unitPriceMap,
                res.data[i].unitId,
                res.data[i].taxPrice
              );
            }
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        {
          goodsId: this.selectGoodsId,
          distributorCategoryId: this.selectCustomerObj.id,
        }
      );
    },
    showPopupFn() {
      if(this.selectCustomerId<=0){
        this.$vux.toast.text('请选择参与客户', 'center');
        return;
      }
      this.showPopup = true;
      this.getGoodsList();
    },
    closePopupFn() {
      this.showPopup = false;
      this.searchKeyWord = "";
      this.selectGoodsId = this.selectedGoods.id;
    },
    openGoods(item) {
      item.open = !item.open;
    },
    selectGoods(item) {
      console.log(item);
      this.selectGoodsId = item.id;
      this.selectObj = item;
    },
    sureSelect() {
      if(this.selectGoodsId<=0) {
        this.$vux.toast.text('请选择商品', 'center');
        return;
      }
      this.sosPackPrice = "";
      this.sosPiecePrice = "";
      this.sosPackLimit = "";
      this.sosPieceLimit = "";
      this.initPackPrice = "";
      this.initPackUnitId = "";
      this.initPiecePrice = "";
      this.initPieceUnitId = "";
      this.packTotalNum = "";
      this.pieceTotalNum = "";
      this.beginTime = "";
      this.endTime = "";
      this.selectedGoods = {};
      // this.selectCustomerObj = {};
      this.hasPack = false;
      this.hasPiece = false;

      this.showPopup = false;
      this.goodsSpecial = this.selectObj.unitVOList.map((item) => {
        return {
          goodsId: item.goodsId,
          taxPrice: 0,
          unitId: item.id,
          unitName: item.name,
          limitNum: 0,
          totalNum: 0,
        };
      });
      this.selectedGoods = this.selectObj;
      console.log("选择的商品信息：", this.selectedGoods);
      this.getUnitPrice()
    },
    searchGoods() {
      this.getGoodsList(this.searchKeyWord);
    },
    resetData() {
      this.selectGoodsId = -1;
      this.selectCustomerId = -1;
      this.sosPackPrice = "";
      this.sosPiecePrice = "";
      this.sosPackLimit = "";
      this.sosPieceLimit = "";
      this.initPackPrice = "";
      this.initPackUnitId = "";
      this.initPiecePrice = "";
      this.initPieceUnitId = "";
      this.packTotalNum = "";
      this.pieceTotalNum = "";
      this.beginTime = "";
      this.endTime = "";
      this.selectedGoods = {};
      this.selectCustomerObj = {};
    },
    submitFn() {
      // let goodsSpecial = [];
      // if (this.sosPackPrice != "") {
      //   goodsSpecial.push({
      //     goodsId: this.selectGoodsId,
      //     taxPrice: this.sosPackPrice,
      //     unitId: this.initPackUnitId,
      //     limitNum: this.sosPackLimit,
      //     totalNum: this.packTotalNum,
      //   });
      // }
      // if (this.sosPiecePrice != "") {
      //   goodsSpecial.push({
      //     goodsId: this.selectGoodsId,
      //     taxPrice: this.sosPiecePrice,
      //     unitId: this.initPieceUnitId,
      //     limitNum: this.sosPieceLimit,
      //     totalNum: this.pieceTotalNum,
      //   });
      // }
      if (-1 == this.selectGoodsId) {
        this.$vux.toast.text("请选择商品！", "center");
        return;
      }
      if (this.beginTime == "") {
        this.$vux.toast.text("请选择开始时间！", "center");
        return;
      }
      if (this.endTime == "") {
        this.$vux.toast.text("请选择结束时间！", "center");
        return;
      }
      if (this.beginTime > this.endTime) {
        this.$vux.toast.text("开始时间不能大于结束时间！", "center");
        return;
      }
      if (-1 == this.selectCustomerId) {
        this.$vux.toast.text("请选择客户！", "center");
        return;
      }
      // if(this.sosPackPrice == ''&&this.hasPack){
      //   this.$vux.toast.text('请填写包价格！', 'center');
      //   return;
      // }
      // if(this.sosPiecePrice == ''&&this.hasPiece){
      //   this.$vux.toast.text('请填写件价格！', 'center');
      //   return;
      // }
      // if (this.hasPack) {
      //   if (!/^\d{0,8}(\.\d{0,2})?$/g.test(this.sosPackPrice)) {
      //     this.$vux.toast.text("整数部分最多8位，小数部分最多2位！", "center");
      //     return;
      //   }
      //   if (!/(^[1-9]\d*$)/.test(this.sosPackLimit)) {
      //     this.$vux.toast.text("限购包数必须为正整数！", "center");
      //     return;
      //   }
      //   if (this.sosPackPrice == 0) {
      //     this.$vux.toast.text("请输入大于0的价格！", "center");
      //     return;
      //   }
      //   if (!/(^[1-9]\d*$)/.test(this.packTotalNum)) {
      //     this.$vux.toast.text("商品数量必须为正整数！", "center");
      //     return;
      //   }
      // }
      // if (this.hasPiece) {
      //   if (!/^\d{0,8}(\.\d{0,2})?$/g.test(this.sosPiecePrice)) {
      //     this.$vux.toast.text("整数部分最多8位，小数部分最多2位！", "center");
      //     return;
      //   }
      //   if (!/(^[1-9]\d*$)/.test(this.sosPieceLimit)) {
      //     this.$vux.toast.text("限购件数必须为正整数！", "center");
      //     return;
      //   }
      //   if (this.sosPiecePrice == 0) {
      //     this.$vux.toast.text("请输入大于0的价格！", "center");
      //     return;
      //   }
      //   if (!/(^[1-9]\d*$)/.test(this.pieceTotalNum)) {
      //     this.$vux.toast.text("商品数量必须为正整数！", "center");
      //     return;
      //   }
      // }
      let goodsSpecial = this.goodsSpecial;
      if (
        goodsSpecial == null ||
        goodsSpecial == "" ||
        goodsSpecial == undefined
      ) {
        this.$vux.toast.text("请填写特价！", "center");
        return;
      }

      for (let price of goodsSpecial) {
        if (!price.taxPrice) {
          this.$vux.toast.text(`请填写${price.unitName}价格！`, "center");
          return;
        }
        if (parseFloat(price.taxPrice) <= 0) {
          this.$vux.toast.text(
            `请输入大于0的${price.unitName}价格！`,
            "center"
          );
          return;
        }
        if (!/^\d{0,8}(\.\d{0,2})?$/g.test(price.taxPrice)) {
          this.$vux.toast.text(
            `${price.unitName}价格，整数部分最多8位，小数部分最多2位！`,
            "center"
          );
          return;
        }
        if (!/(^[1-9]\d*$)/.test(price.limitNum)) {
          this.$vux.toast.text(
            `限购${price.unitName}数必须为正整数！`,
            "center"
          );
          return;
        }
        if (!/(^[1-9]\d*$)/.test(price.totalNum)) {
          this.$vux.toast.text(
            `${price.unitName}商品数量必须为正整数！`,
            "center"
          );
          return;
        }
      }

      let params = {
        beginTime: this.beginTime,
        endTime: this.endTime,
        distributorCategoryId: this.selectCustomerObj.id,
        buyGoodsId: this.selectGoodsId,
        discountUnitPriceList: goodsSpecial,
      };
      this.$ajax.post(
        "activity/discount/submit",
        params,
        (res) => {
          // console.log(res)
          if (res.code == "200") {
            this.$vux.toast.text("设置成功", "center");
            this.resetData();
            if (this.$fromApp(this)) {
              this.$callJava({ code: 1003, quick: true });
            } else {
              this.$router.go(-1);
            }
          } else {
            this.$vux.toast.text(res.msg, "center");
          }
        },
        1
      );
    },
  },
};
</script>

<style lang="less" type="text/less" scoped>
input {
  -webkit-appearance: none;
}
.must::before {
  content: "* ";
  color: #ff3b47;
}
.sosBody {
  background-color: #ffffff;
  .inputGroup {
    margin-top: 0.2rem;
    .firstGroup {
      width: 100%;
      .firstGroupItem {
        height: 0.66rem;
        margin-bottom: 0.16rem;
        .firstGroupTitle {
          width: 1.68rem;
          text-align: right;
        }
        .firstGroupR {
          margin-left: 0.54rem;
          .disInputM {
            height: 0.64rem;
            border: 1px solid #dddddd;
            border-radius: 4px;
          }
          .choseBtn {
            width: 1.36rem;
            height: 0.66rem;
            border-radius: 4px;
            line-height: 0.66rem;
            text-align: center;
            color: #ffffff;
            background-color: #8e919f;
            margin-left: 0.1rem;
          }
          .selectDate {
            width: 2rem;
            height: 0.84rem;
            border: 1px solid #dddddd;
            border-radius: 4px;
            text-align: center;
            padding: 0;
          }
        }
      }
    }
    .secondGroup {
      margin-top: 0.3rem;
      width: 6.9rem;
      margin-left: 0.3rem;
      .secondGroupItem {
        height: 0.66rem;
        margin-top: 0.1rem;
        position: relative;
        .inputS {
          width: 1.54rem;
          height: 0.66rem;
          border-radius: 4px;
          border: 1px solid #dddddd;
          margin: 0 0.1rem;
          outline: none;
          text-align: center;
        }
      }
    }
  }
  .setBtn {
    position: fixed;
    bottom: 0.3rem;
    left: 0.3rem;
    width: 6.9rem;
    height: 0.92rem;
    border-radius: 0.46rem;
    color: #ffffff;
    font-size: 17px;
    background-color: #527dd9;
    text-align: center;
    line-height: 0.92rem;
    margin-top: 1rem;
  }
  .customerDialog {
    .customerList {
      width: 80%;
      height: 4rem;
      margin-left: 10%;
      margin-top: 0.3rem;
      .customerListScroller {
        margin: 0.5rem 0.5rem 1rem;
        height: 4rem !important;
        .customerItem {
          width: 100%;
          height: 0.8rem;
          img {
            width: 0.36rem;
            height: 0.36rem;
            margin-right: 0.4rem;
            margin-left: 0.2rem;
          }
          span {
            color: #333333;
            font-size: 17px;
            width: 3.8rem;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            text-align: left;
          }
        }
      }
    }
    .selectCustomerBtn {
      width: 2.54rem;
      height: 0.84rem;
      color: #ffffff;
      font-size: 17px;
      text-align: center;
      line-height: 0.84rem;
      border-radius: 0.42rem;
      background-color: #527dd9;
      margin: 0.2rem 0 0.2rem 3rem;
    }
  }
  .selectGoodsBox {
    background-color: #ffffff;
    .selectGoodsHead {
      width: 100%;
      height: 0.88rem;
      line-height: 0.88rem;
      border-bottom: 1px solid #ededed;
      font-size: 18px;
      .vux-close {
        width: 0.3rem;
        height: 0.3rem;
        margin-left: 0.5rem;
        margin-right: 0.3rem;
      }
      .selectGoodsTitle {
        font-weight: bold;
      }
    }
    .searchBox {
      width: 100%;
      height: 0.7rem;
      margin-top: 0.3rem;
      .searchInput {
        outline: none;
        width: 5.38rem;
        height: 0.68rem;
        border: 1px solid #c8cbd3;
        border-radius: 3px;
        margin-left: 0.3rem;
        margin-right: 0.1rem;
        text-indent: 0.3rem;
        font-size: 15px;
      }
      .searchInput::placeholder {
        color: #c6c6c6;
        font-size: 15px;
        font-family: "iconfont" !important;
      }
      .searchInput::-moz-placeholder {
        color: #c6c6c6;
        font-size: 15px;
        font-family: "iconfont" !important;
      }
      .searchInput::-webkit-input-placeholder {
        color: #c6c6c6;
        font-size: 15px;
        font-family: "iconfont" !important;
      }
      .searchBtn {
        width: 1.38rem;
        height: 0.68rem;
        text-align: center;
        line-height: 0.68rem;
        color: #868999;
        background-color: #c8cbd3;
        border-radius: 3px;
        border: 1px solid #c8cbd3;
      }
    }
    .searchContent {
      .searchTree {
        width: 6.5rem;
        /*height: 8.6rem;*/
        margin: 0.5rem;
        .searchContentScroller {
          width: 6.5rem;
          height: 7.5rem;
          .treeItem {
            margin: 0.2rem 0.1rem;
            .treeParent {
              img {
                width: 0.2rem;
                height: 0.2rem;
                padding: 0.1rem;
                border: 1px solid #dddddd;
              }
              p {
                color: #333333;
                font-size: 15px;
                margin-left: 0.3rem;
              }
            }
            .treeChildren {
              margin-left: 0.5rem;
              .childrenItem {
                margin: 0.2rem 0;
                color: #333333;
                font-size: 15px;
                img {
                  width: 0.36rem;
                  height: 0.36rem;
                  margin-right: 0.3rem;
                }
              }
            }
          }
        }
      }
      .sureBtn {
        width: 6.2rem;
        height: 0.84rem;
        line-height: 0.84rem;
        text-align: center;
        border-radius: 0.42rem;
        color: #fb6e52;
        font-size: 17px;
        border: 1px solid #fb6e52;
        position: fixed;
        left: 50%;
        bottom: 0.3rem;
        margin-left: -3.1rem;
      }
    }
  }
}
</style>
